<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var colM = [
        { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
        { title: "Customer Name", width: 130, dataIndx: "ContactName" },
        { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "integer" },
		{ title: "Order Date", width: "100", dataIndx: "OrderDate", dataType: "date" },
		{ title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date" },
		{ title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
		{ title: "Shipping Via", width: 100, dataIndx: "ShipVia", dataType: "date" },
        { title: "Freight", width: 100, align: "right", dataType: "float", dataIndx: "Freight" },
        { title: "Shipping Name", width: 160, dataIndx: "ShipName" },
        { title: "Shipping Address", width: 200, dataIndx: "ShipAddress" },
        { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
        { title: "Shipping Region", width: 130, dataIndx: "ShipRegion" },
        { title: "Shipping Postal Code", width: 135, dataIndx: "ShipPostalCode" }
		];
        var dataModel = {
            location: "remote",
            sorting: "remote",
            dataType: "JSON",
            method: "GET",
            sortIndx: ["ShipCountry", "ContactName"],
            sortDir: ["up", "down"],
            url: "/pro/orders/get", //for ASP.NET
            //url: "orders.php", //for PHP
            getData: function (dataJSON) {
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
            }
        }

        var gObj = {
            width: 700, height: 400,
            dataModel: dataModel,
            wrap: false,
            hwrap: false,
            showBottom: false,
            collapsible:false,
            colModel: colM,               
            title: "Shipping Orders remote sorting",
            resizable: true,
            columnBorders: true,
            virtualX:true, virtualY:true,
            freezeCols: 2
        };
        var $grid = $("div#grid_sorting_remote").pqGrid(gObj);

        //bind the select list.
        $("#grid_remote_sorting_select").change(function (evt) {
            var val = $(this).val();
            var DM = $grid.pqGrid("option", "dataModel");
            if (val == "multiple") {
                DM.sortIndx = [DM.sortIndx];
                DM.sortDir = [DM.sortDir];
            }
            else {
                DM.sortIndx = DM.sortIndx[0];
                DM.sortDir = DM.sortDir[0];
            }
            $grid.pqGrid("option", "dataModel", DM);
            $grid.pqGrid("refreshDataAndView");
        });
    });
        
</script>    
</head>
<body>

<div style="margin: auto; width: 250px; margin-bottom: 20px;">
        Sorting type:
        <select id="grid_remote_sorting_select">
            <option value="single">Single Column</option>
            <option value="multiple" selected="">Multiple Column</option>
        </select>
    </div>
    <div id="grid_sorting_remote" style="margin: 5px auto;">
    </div>

</body>

</html>
